The Purpose

The design and development for the Bombora surf forecasting application sought to address a unique need among a tight-knit, surf community requiring a new type of mobile weather forecasting application that was more than “just another weather app”, but a reliable tool that focused on individual surf styles, skill levels, and personal preferences.

The Goal

The goal was to design a simplified application focusing only on the information necessary to help surfers better understand how closely their individual style, personal preferences, and skill level compared to the weather conditions in ocean environments so they can make more informed decisions to better utilize their time on the ocean and achieve their athletic goals.

The Project

As part of my curriculum studies, and filling multiple roles along the UX spectrum, I utilized a range of industry tools and core skills, to conduct research, synthesize ideas, conceptualize, and refine designs to produce a complete, working prototype for Bombora in a 6-month time frame.

The Challenge

To better understand the challenge, thoroughly defining the problem was essential. By focusing on these contributing factors and explaining them in the form of a concise problem statement, I was able to gain initial insights into what the needs and goals of my users might be, the origin of these needs, and how I may approach potential solutions and by what criteria I am able to measure their success.

Potential Problems

As a starting point to guide the future design, several presumptions were made to identify any potential underlying problems users may experience when attempting to carry out any of the tasks established in the overarching problem statement as well as any possible solutions which could be investigated further to solve these problems. The following context was established:

Competitor Analysis

When considering how Bombora may fair among existing applications already established in today’s market,  various social media platforms, discussion forums, and community websites centered around surfing were explored to assist in identifying two of the leading surf forecasting applications claiming to serve a similar purpose to that of the problems I was looking to solve being Magicseaweed and Surfline.To fully vet the two products, a competitor profile was created for each application highlighting numerous app strengths and weaknesses, potential threats, and a variety of competitive advantages (opportunities).

Competitor Profiles

Strengths

• The app is well known being the first of its kind
• Is popular and has a large following
• Its data is used at popular surf events
• Provides coverage for 3,000 beaches in 180 countries

Weaknesses

• Forecasting radius is general to an area
• Nearby spots are general predefined forecasts
• Local/personalized conditions are largely ignored
• No real instructional content to "become a better forecaster" as claimed

Opportunities

• Understanding data is a personal expectation and needs managing
• Provide instruction on reading synoptic charts
• Upgrade the help section, define terminology and explain features
• More accurately display wave height ranges (Refer to the Bureau of Meteorology marine forecasting)

Threats

• Online reviews claim wave data is too general and other apps’ height estimations are more accurate
• Reviews state other forecasting apps allow personalized filtering of preferred conditions/li>
• Live cams on other apps work much better
• The Spot Advisor app has done away with media content by focusing more on connecting users with each other to report and confirm forecasts

Strengths

• Has a loyal following and an extensive history in forecasting
• Impressive UI and intuitive layout
• Values its user's end experience
• Largest selection of live surf cams on the market
• Written reports by forecasters are a plus

Weaknesses

• App relies heavily on the live cam experience (Subscription for HD cams)
• Too many ads on the free version
• Same information as other apps, just presented in a fancier way
• Some controversy exists around Surfline promoting product features with the sole purpose of drawing customers

Opportunities

• Include instructions on how to read the animated wind charts
• Balance between future prediction and real time live cam
• UI is quite intuitive, could use as a design inspiration for Bombora app

Threats

• Reports suggest Surfline’s cams have contributed to increased pollution by drawing large crowds to once pristine beaches and locals have been known to destroy Surfline’s cams to protect them
• Several user reviews suggest using Surfline’s cams in conjunction with other apps for better forecasting accuracy.
• The Lazy Surfer app is making a splash in the market by personalizing the experience with features tailored toward individual condition reports

Research

To confirm whether the user goals and usage context remained in alignment with the established problem statement research was conducted leveraging surveys enabling me to reach a large audience via social media, and served as a basis for subsequent user interview scripts. Facilitation of user interviews with individuals qualifying as "a surfer having used a weather forecasting app to determine when to go surfing" enabled me to ask open-ended questions based on real-world experiences to assist in extrapolating participants' reasoning and root causes around specific pain points they'd encountered when using such applications.

Research Goals

For the above mentioned research methods to be effective and yield viable results, four main user research goals were established which set the foundation on which the survey content, user interview script, and questionnaire were based.

Research Insights

Both the survey content and user interview script/questions were carefully formulated to address the specific areas of context and workflows for weather forecasting applications used in the surfing community. Qualitative data obtained from both the studies was then broken up into six distinct categories where affinity mapping techniques were applied to arrange the information into respective groups by category.

Affinity Mapping

Design Personas

To better communicate research the insights obtained from real surfers, design personas were created to tell a more personal story as to why and how surfers interact with and use weather forecasting applications from their perspective. Three personas were developed representing each of the main user types that stood out during analysis focusing around skill level, usage type, and the degree of understanding in surf forecasting. 4 main focal points were established when defining persona content ensuring a user-centered approach throughout the process:

Personas

User Journeys

Using prior research as a base for extracting some of the most important goals, habits and behaviors exhibited by users, journey maps were created to better visualize the thought processes different user types engage in to accomplish their goals. By establishing important sections within the journey maps such as the scenario, goal, task, opportunities, and any surrounding thoughts and feelings, a visual narrative demonstrating a complete and cohesive story made for a deeper means of understanding users.

Journey Maps

Ideation

In preparation for the information architecture phase it was necessary to take the variety of user persona perspectives and begin fleshing out the possible in-app paths individual personas may take to achieve their specific goals and ensure no matter what the their need, an action was available to accommodate it.

Task Analysis & User Flows

Using the context from each design persona as a guide, 3 of the most important user goals and steps required to complete the tasks were analyzed then outlined with respective entry points, criteria for success, and simplified into as fewer steps as possible without deviating from the needs of each persona. Subsequently using the information derived from the analysis’, flow diagrams were created to better visualize specific steps required to complete the objective from the users point of view and ensure the personas needs were fulfilled at each point in the user flow.

User Flows

Information Architecture

To better understand the nature of the application in its entirety a visualization for the overall information architecture and type of content contained within was necessary. With influence from the prior user flows a base structure was laid out in the form of an overall sitemap containing all determined screens demonstrating a first pass on how the various levels of hierarchy within application might be connected and their relationship to one another.

Initial Sitemap

The initial sitemap was based upon a strict type of hierarchy where user navigation stemmed from the main home screen with each new parent screen initiating a sequence of subsequent screens (children) relating to its content. One exception occurred where a coexisting type of hierarchy was used where switching between the tabbed screens for individual synoptic charts made for an easier transition between the four types available.

Card Sort & Refinement

With a first pass sitemap completed I needed to refine it based on the intuition of real users. To obtain data from a vast audience I conducted for an online card sorting activity using OptimalSort. Confident in a set of predefined categories I opted to proceed with a closed-type card sort where participants were asked to group specific surf and weather related content into said categories. Upon concluding the activity, results/metrics were downloaded, sorted based on their related topics, analyzed for recurring patterns and emerging trends, and a revised sitemap created to suit.

Revised Sitemap

Rapid Prototyping

Using the revised sitemap as a guide to learn what the base functionality for both the application and web version might look like, it's content, and the screens on which content was to be displayed a set of hand-drawn sketches were drafted using transparent wax paper to represent the screens per the sitemap. To avoid wading too deeply into details, color, size, spacing, and imagery were ignored and the completed sketches were cut to size, arranged, and overlaid into different combinations to portray, from a high-level perspective, the design functionality as low-fidelity prototypes showing different user flows and interactions.

Wire-Framing

With high level visuals for the structure and functionality of Bombora completed, translating the low-fidelity sketches into mid-fidelity format using Sketch’s design tools to create the various interface elements helped visualize the overarching concept for how the app might operate and the placement of UI elements without too much detail. The wireframes were then arranged as static visuals using annotations, connector arrows, and interaction highlights to demonstrate the true interactivity and flow for the various core features within the application.

Mid-Fidelity Wire-Frames

Usability Testing

To evaluate the success rate regarding app learnability and memorability among experienced users and new users alike, a usability test was conducted to assess the efficiency of the app’s main forecasting functions, recognize and record any errors encountered during use, and gauge the overall user satisfaction in areas like navigation, content, use of language layout, and UI. The following test objectives were considered:

High-Fidelity Prototyping & Preference Tests

With usability testing complete and a solid set of wireframes to work from, it was time to bring the design to life. Two variations of the  interface were developed for some of the main screens as high-fidelity prototypes, one being an overall theme using color variations, the other using surf-related imagery, experimental weather icons, and alternate fonts. The prototypes were presented to users for preference testing via Helioapp using a set of choice based criteria and instructions for comparing variations of the wireframes and icon options side by side. Initial testing resulted in participants favoring image style icons and subsequent testing resulted in a preference for the overall themed design.

Design Evolution & Styling

Focusing on the aesthetics required for the themed option, an initial style guide was developed to improve the UI and create a visually appealing brand to complete the user experience containing color, typography, and the overall styles to be used throughout the application. The main design principles applied comprised of:

Design Evolution

Design Language System

Using the style guide and brand theme as a foundation, a comprehensive design language was ultimately developed for the entire Bombora product as a means of governance containing all design standards and rules for their application within the user interface across multiple platforms.​

Accessibility Considerations

Over the course of the design several important accessibility items were addressed by evaluating the design against the Web Content Accessibility Guidelines (WCAG) accessibility guidelines and ranking them according to their level of compliance (A, AA, or AAA). Bombora's goal was to comply, at a minimum with either the A and/or AA level requirements, and the AAA level requirement in areas when possible. To obtain compliance the following revisions were implemented:

Putting It All Together

With the majority of the main design deliverables an design language completed, an updated interactive prototype and set of 3D mock-up’s were created using Figma to present Bombora to various audiences offering a realistic sense into how the application will function and feel, and for use in future testing and planning for further iteration drawing the product closer toward completion.

Next Steps

In the coming months upon graduating from my CareerFoundry studies, I intend to bring the Bombora Surf Forecasting application to completion focusing on several areas requiring specific improvements or additional research and ideation to evolve including:

Final Reflection

Pursing design for the Bombora Surf Forecasting app for my student project not only allowed me to graduate with my UX Design Immersive Certification, but granted fulfillment of my personal journey into the world of technology and user experience. The overall experience has led to significant professional growth and learning opportunities such as:

• Learning industry tools, and technical competencies, while honing my interpersonal skills for use across the UX design-thinking spectrum
• The talk of the trade. Industry jargon and technical terms commonly referred to throughout the technology sector and product design world
• How evidently UX design-thinking and associated skills are translatable from those used in other industries
• Feedback and insights are still two of the greatest means toward professional growth
• My interpersonal skills will offer great value in building relationships and driving momentum in my career choice
• The beauty of technology and the endless possibilities it offers us to improve our world
• A new appreciation for the human experience, its value, and why it matters in the lives of all of us